<template>
  <div>
    <editor ref="pyEditer" v-model="content" @init="editorInit" lang="python" theme="eclipse" width="100%" height="100%" :options="{
       enableBasicAutocompletion: true,
       enableSnippets: true,
       enableLiveAutocompletion: true,
       tabSize:2,
       fontSize:17,
       showPrintMargin:false
     }"></editor>
  </div>
</template>
<script>
import glbJson from '../utils/global_variable.js'
  export default {
    name:'Python',
    props:{
      pyActives:{
        type:String
      }
    },
    data(){
      return {
        activeindex:0,
        content:''
      }
    },
    created(){
      this.content = this.searchInjson(glbJson.pythonJson, this.pyActives).content
    },
    components:{
      editor: require('vue2-ace-editor')
    },
    watch:{
      content(newVal){
        //监听文件名变化，重置ace内容
        this.activeindex = this.searchInjson(glbJson.pythonJson, this.pyActives)._index
        glbJson.pythonJson[this.activeindex].content = newVal
      },
      pyActives(newVal){
        this.content = this.searchInjson(glbJson.pythonJson, newVal).content
      }
    },
    methods: {
      editorInit: function () {
        //初始化ace
        require("brace/ext/language_tools");
        require("brace/mode/python");
        require("brace/snippets/python");
        require("brace/theme/eclipse");
      }
    }
  }
</script>
<style scoped>
  .editor-bar{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    position: relative;
  }
</style>
